@use '@angular/material' as mat;

.mat-list-base {
    padding-top: 0;
}

.scroll-viewport {
    min-height: calc(100vh - 185px);
}

.search-panel {
    padding: 10px 0 0 0;
    display: flex;
    justify-content: center;
}

.search-bar {
    @include mat.form-field-density(-5);
    width: 96%;
}

mat-nav-list {
    overflow: scroll;
    max-height: calc(100vh - 193px);
}

::ng-deep {
    .search-bar {
        div {
            border-radius: 20px;
        }
    }

    div[matformfieldlineripple], .mat-mdc-form-field-subscript-wrapper {
        display: none;
    }

    .mat-expansion-panel-body {
        padding: 0 !important;
    }

    .mat-expansion-panel {
        border-radius: 0 !important;
    }

    .mat-mdc-tab.mdc-tab {
        padding: 0 5px;
    }
}

[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;
    appearance: none;
    height: 10px;
    width: 10px;
    background-image: url('');
    background-size: 10px 10px;
    color: #fff;
}

#groups-list,
#favorites-list {
    height: calc(100vh - 120px);
}

@media only screen and (max-width: 599px) {
    .channel-name {
        max-width: 100px;
    }

    .tab-title {
        display: none;
    }

    .tab-icon {
        display: block;
    }

    .scroll-viewport {
        min-height: calc(50vh - 159px);
    }
}
